<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<script src="public/js/jx-start-yuejuan.js"></script>
<style>
.fenshu {
	border: 1px solid #CCC;
	width: 20px;
	height: 20px;
	padding: 5px;
	margin-top: 3px;
	border-radius: 5px;
}

.fenshu:after {
	content: '分';
}

.fenshu:hover {
	cursor: pointer;
	background: #EEE;
}

.rightInfo {
	width: 26%;
	height: 280px;
	float: right;
	margin: 5px;
	margin-right: 10px;
}

</style>

<form id="startYueJuanForm">
	<div style="border: 1px dashed none; width: 100%; height: 100%;">
		<input type="hidden" value="${zuoyeId }" id="zuoyeId"> <input
			type="hidden" value="${studentId }" id="studentId"> <input
			type="hidden" id="userinfo" value="${userinfo.userInfoId }">
		<fieldset
			style="margin-left: 20px; margin-top: 30px; border: 1px solid #CCCCCC; padding: 5px;display: ${grande==null?'none':'block'}">
			<legend>练习基本信息</legend>
			<div class="rightInfo">
				<div style="font-size: 30px;">${grande.sumScore }</div>
				<div style="margin-top: 10px;">【名称】：${className }-${name }</div>
				<div style="margin-top: 10px;">【出卷人】：${userinfoName }</div>
				<div style="margin-top: 10px;">【选择题数】：${fn:length(title1)}道题</div>
				<div style="margin-top: 10px;">【判断题数】：${fn:length(title2)}道题</div>
				<div style="margin-top: 10px;">【编程与简答题数】：${fn:length(title3)}道题</div>
				<div style="margin-top: 10px;">【学习阶段】： 《${phaseEntity.phaseName }》</div>
				<div style="margin-top: 10px;">【章节】：《${chapterEntity.chapterName }》</div>

			</div>

			<div id="containerjx-start"
				style="border: 1px solid none; height: 290px; width: 70%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
				
			</div>
			<script type="text/javascript" src="public/js/echarts-all-3.js"></script>
			<script type="text/javascript">
				var dom = document.getElementById("containerjx-start");
				var myChart = echarts.init(dom);
				var studentScore=${studentScore};//学生分数数组
				var studentNames=${studentNames};//学生姓名数组
				var app = {};
				option = null;
				option = {
					title : {
						subtext : '韬睿科技TR09班'
					},
					tooltip : {
						trigger : 'axis'
					},
					legend : {
						data : ['迟到次数' ]
					},
					toolbox : {
						show : true,
						feature : {
							dataView : {
								show : true,
								readOnly : false
							},
							magicType : {
								show : true,
								type : [ 'line', 'bar' ]
							},
							restore : {
								show : true
							},
							saveAsImage : {
								show : true
							}
						}
					},
					calculable : true,
					xAxis : [ {
						type : 'category',
						boundaryGap : 20,//柱形图是否在Y轴居中
						barGap:'50%',
						/* min:0,
						max:30, */
						data : studentNames,
					 axisLabel:{
		                 //X轴刻度配置
		                 interval:'auto', //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
		         		rotate:-90
					 },
					} ],
					yAxis : [ {
						type : 'value',
					} ],
					series : [ {
						barCategoryGap : 10,//这是柱形图的宽度越小宽度越大
						name : '分数',
						type : 'bar',
						barGap:'30%',
						data :studentScore,
						itemStyle : {
							normal : {
								color : function(params) {
									var colorList = [ '#6B9CDE', '#A4E9C1',
											'#E68900', '#FF6347','#E68900', '#FF6347','#E68900', '#FF6347'];
									return colorList[params.dataIndex]
								},
							}
						},
						markPoint : {
							data : [ {
								type : 'max',
								name : '最大值'
							}, {
								type : 'min',
								name : '最小值'
							} ]
						},
						markLine : {
							data : [ {
								type : 'average',
								name : '平均值'
							} ]
						}
					} ]
				};
				;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			</script>
		</fieldset>

		<!-- ==================================选择题部分========================= -->
		<div
			style="margin-left: 20px; margin-top: 30px; border: 1px solid #CCCCCC; padding: 5px;">
			<span style="margin-left: 20px;">选择题 (共${fn:length(title1)}个小题，总分：${xuanze })</span>&nbsp; <input
				type="button" id="optionBtn" style="padding: 3px;" class="easyui-linkbutton" value="自动阅卷" />&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" value="选择题分数为：" style=" border: none;outline: none;width: 90px;" />
		     <input id="catherine"  value="${neirong1 }"  readonly="readonly" style="width: 25px; border: none; padding: 3px; font-size: 15px; color: red;"/>&nbsp;分
			
			<div style="width: 100%; margin-top: 6px; border: 0.5px solid #EEE;"></div>
			<div style="margin-left: 20px; margin-top: 10px;">
				<c:forEach items="${title1 }" var="title1" varStatus="state">
					<input type="hidden" name="fenshu" style="border: none; outline: none"
					 	 value=${title1.titleType==title1.titleAnswer ?score:'0'}>
					<input type="hidden"  data-id="${title1.titleId }" name="we"
						 value="${title1.titleType==title1.titleAnswer ?'1':'0'}">
					<div>${state.index+1 }、${title1.title }
						<span style="color: ${title1.titleType==title1.titleAnswer ?'black':'red' };">
						${title1.titleType} </span>
						<span style="color: black;display: ${title1.titleType==title1.titleAnswer ? 'none':'block'}">答案为 ：<span style="color: red;">${title1.titleAnswer}</span></span>
						 <c:if test="${title1.imageId!=null }">
						 <div style="margin-left: 2%">
							<span style="color: black;"> 效果如图所示：</span><br>
							<img style="width: 15%;height: 5%;margin-left: 2%" alt="" src="upload/${title1.imageId.imagePath }">
						</div>
						</c:if> 
						<div style="margin-left: 25px; margin-top: 5px;">A、${title1.optionA }</div>
						<div style="margin-left: 25px; margin-top: 5px;">B、${title1.optionB }</div>
						<div style="margin-left: 25px; margin-top: 5px;">C、${title1.optionC }</div>
						<div style="margin-left: 25px; margin-top: 5px;">D、${title1.optionD }</div>
					</div>
				</c:forEach>
			</div>
		</div>
		<!-- ==================================判断题部分================================== -->
		<div style="margin-left: 20px;margin-top: 20px;border: 1px solid #CCCCCC;padding: 5px;display: ${empty title2 ?'none':'block' } ;">
			<span style="margin-left: 20px;">判断题 (共${fn:length(title2)}个小题，得分：${panDuan })</span> 
			<input type="button" id="panDuanBtn" class="easyui-linkbutton"  style="padding: 3px;" value="自动阅卷" />&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text"  style=" border: none;outline: none;width: 90px;" value="判断题分数为：" />
			<input id="catherine2" readonly="readonly" value="${neirong2 }" style="width: 25px; border: none; padding: 3px; font-size: 15px; color: red;"/>&nbsp;分
			<div style="width: 100%; margin-top: 6px; border: 0.5px solid #EEE;"></div>
			<c:forEach items="${title2 }" var="title2" varStatus="state">
				<div style="margin-left: 25px; margin-top: 5px;">${state.index+1}、${title2.title }
						<input type="hidden" data-id="${title2.titleId }" name="we" value="${title2.titleType==title2.titleAnswer ?'1':'0'}">
							(<span
								style="color: ${title2.titleType==title2.titleAnswer ?'black':'red' };">
								${title2.titleType }</span>)
								<input type="hidden" name="fenshu2"
									style="border: none; outline: none; color: red;"
									value=${score }>答案为 ：<span style="color: ${title2.titleType==title2.titleAnswer ?'black':'red' };">${title2.titleAnswer}</span>
				</div>
			</c:forEach>
		</div>
		<!-- ==================================编码题部分================================== -->
		<div
			style="margin-left: 20px;margin-top: 20px;border: 1px solid #CCCCCC;padding: 5px;display: ${empty title3 ?'none':'block' } ;">
			<span style="margin-left: 20px;">编码题 (共${fn:length(title3)}个小题，得分：50分)</span>
			<div style="width: 100%; margin-top: 6px; border: 0.5px solid #EEE;"></div>
			<c:forEach items="${title3 }" var="title3" varStatus="state">
						<div style="margin-left: 25px; margin-top: 5px;">
						${state.index+1 }、(得分:
						 <input   data-id="${title3.titleId }"   id="score${state.index+1 }" name="score3" style="color: red; width: 25px; padding: 3px; border: none; outline: none; font-size: 15px;"
							readonly="readonly" value="${title3.delete!=1?title3.delete:'0' }" />分) ${title3.title }
					</div>
					 <c:if test="${title3.imageId!=null }">
						 <div style="margin-left: 2%">
							<span style="color: black;"> 效果如图所示：</span><br>
							<img style="width: 15%;height: 5%;margin-left: 2%" alt="" src="upload/${title3.imageId.imagePath }">
						</div>
						</c:if> 
					
					<br/>
						<c:if test="${title3.titleType !=null}">
							<span style="margin-left: 50px;">答案：</span>
							<div style="margin-left: 100px; margin-top: 5px;">${title3.titleType }</div>
							<c:if test="${title3.titleType!=null || title3.titleAnswer!='略' }">
							<br/>
								<span style="margin-left: 50px;">正确答案：</span>
								<div style="margin-left: 130px; margin-top: 5px;">${title3.titleAnswer }</div>
							</c:if>
						</c:if>
				<br />
				<div class="pingfen" style="float: right; margin-right: 1%">
					<span style="border: 20px;">评分：</span> <span name="pingFen1"
						data-id="score${state.index+1 }" id="0" class="fenshu">0</span> <span
						name="pingFen2" data-id="score${state.index+1 }" id="10"
						class="fenshu">10</span> <span name="pingFen3"
						data-id="score${state.index+1 }" id="20" class="fenshu">20</span>
					<span name="pingFen4" data-id="score${state.index+1 }" id="25"
						class="fenshu">25</span> <span name="pingFen5"
						data-id="score${state.index+1 }" id="35" class="fenshu">35</span>
					<span name="pingFen6" data-id="score${state.index+1 }" id="45"
						class="fenshu">45</span> <span name="pingFen7"
						data-id="score${state.index+1 }" id="50" class="fenshu">50</span>
					<span name="pingFen8" data-id="score${state.index+1 }" id="100"
						class="fenshu">100</span>
				</div>
				<br />
				<br />
			</c:forEach>
			<fieldset
				style="width: 60%; margin-left: 30px; border-radius: 2%; border: 1px solid #CCC">
				<legend style="margin-left: 10px;">教师评语</legend>
				<textarea id="appriase" rows="5%" cols="100%"
					style="border-style: solid; border-color: #FFFFFF; outline: none">
				${grande.apprise }
				</textarea>
			</fieldset>
			<br>

		</div>
		<div
			style="border: 1px solid none; padding: 15px; margin-top: 5px; text-align: right;">
			<a id="scoreSave" class="easyui-linkbutton"
				onclick="return confirm('确定保存吗？')" iconCls="icon-search">保存</a>
			<a id="endYueJuan" class="easyui-linkbutton"onclick="return confirm('确定提交吗？')"iconCls="icon-reload">结束阅卷</a>
		</div>
	</div>
</form>